<div class="containerStyle">
  <h3>描述</h3>
  <p>列固定 + 列动态显示/隐藏</p>
  <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns">
    <div style="height: 28px; margin-bottom: 10px">
      <!--控制列隐藏/显示-->
      <ti-cols-toggle
        style="float: right"
        [searchable]="searchable"
        [panelWidth]="panelWidth"
        [selectAll]="selectAll"
        [tipContent]="tipContent"
        [tipPosition]="tipPosition"
        [disabled]="disabled"
        [noDataText]="noDataText"
      >
      </ti-cols-toggle>
    </div>
    <!--.ti3-table-container是表体的容器，它的子元素中的table的thead是用来控制各列宽度，实际不显示；tbody是实际显示的表体-->
    <!--注意1:此处一定要使用.ti3-table-container样式类-->
    <!--注意2:用户在有.ti3-table-container样式类的容器上来设置表体的高度或最大高度-->
    <div class="ti3-table-container">
      <table>
        <thead>
          <tr>
            <ng-container *ngFor="let column of columns;">
              <th [tiColumnFixed]="column.fixed" *ngIf="column.show || column.show === undefined" width="{{column.width}}">
                {{column.title}}
              </th>
            </ng-container>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let row of displayed;index as i">
            <td *ngIf="columns[0].show || columns[0].show === undefined" tiColumnFixed="left" tiOverflow>{{row.firstName}}</td>
            <td *ngIf="columns[1].show || columns[1].show === undefined" tiColumnFixed="left" tiOverflow>{{row.lastName}}</td>
            <td *ngIf="columns[2].show || columns[2].show === undefined" tiOverflow>{{row.age}}</td>
            <td *ngIf="columns[3].show || columns[3].show === undefined" tiOverflow>{{row.balance}}</td>
            <td *ngIf="columns[4].show || columns[4].show === undefined" tiOverflow>{{row.email}}</td>
            <td *ngIf="columns[5].show || columns[5].show === undefined" tiOverflow>{{row.address}}</td>
            <td *ngIf="columns[6].show || columns[6].show === undefined" tiOverflow>{{row.phone}}</td>
            <td *ngIf="columns[7].show || columns[7].show === undefined" tiOverflow>{{row.parents}}</td>
            <td *ngIf="columns[8].show || columns[8].show === undefined" tiColumnFixed="right" tiOverflow>{{row.school}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </ti-table>
</div>
